﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="4.aspx.cs" Inherits="BaseWeb.拖拽研究._3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>事件监听和回显（Feedback）</title>
    <%--
            运行上一个例子，你可能会产生疑惑，真的放到目标容器上了吗？用户也会产生同样的疑惑。所以，可以监听拖动过程中发生的一些事件，并用可见的方式让用户知道。这就叫做回显（Feedback）。

        对于源（source)，可以监听的事件包括： 
　　        create: 在source上应用draggable函数时触发
 　　        start：开始拖动时触发
 　　        drap：拖动过程中触发
 　　        stop：释放时触发
        对于目标（target）,可以监听的事件包括：
 　　        create: 在target上应用droppable函数时触发
 　　        activate：如果当前拖动的source可以drop到本target，则触发
 　　        deactivate：如果可以drop到本target的拖拽停止，则触发
 　　        over：source被拖动到target上面
 　　        out：source被拖动离开target
 　　        drop：source被释放到target
 　　        
        事件处理函数都是通过draggable和droppable函数的参数传递，在这些事件处理函数中就可以进行Feedback。看一下实际的例子：
     --%>

    <script src="../../js/jquery-1.7.min.js" type="text/javascript"></script>

    <script src="../../js/jquery-ui-1.8.16.custom.min.js" type="text/javascript"></script>

    <script>
        $(function()
        {
            $("#dragsource").draggable({
                start: function(event, ui)
                {
                    debugger;
                    $(this).find("p").html(":-S");
                },
                stop: function(event, ui)
                {
                    $(this).find("p").html(":-|");
                }
            });

            $("#droppable").droppable({
                activate: function(event, ui)
                {
                    $(this).find("p").html("Drop here !");
                }, over: function(event, ui)
                {
                    $(this).find("p").html("Oh, Yeah!");
                },
                out: function(event, ui)
                {
                    $(this).find("p").html("Don't leave me!");
                },
                drop: function(event, ui)
                {
                    $(this).find("p").html("I've got it!");
                }
            });
        })
        
    </script>

</head>
<body>
    <form id="form1" runat="server">
    <div id="dragsource" style="width: 20px; background-color: red;">
        <p id="targetMsg">
            :-|</p>
    </div>
    <div id="droppable" style="background-color: gray; height: 300px">
        <p>
            Can drop!
        </p>
    </div>
    </form>
</body>
</html>
